<template>
  <div class="top-header">
    <div class="header-logo">
      <a href="###">
        <img src="~@/assets/images/logo.png" alt="" />
        <p><span>视联网存储服务系统</span><br /><i>V1.24.0</i></p>
      </a>
    </div>
    <div class="header-nav">
      <router-link to="/homePage">首页</router-link>
      <router-link to="/personalResources">个人资源</router-link>
      <router-link to="/cloudResources">云端资源</router-link>
      <router-link to="/contentEditing">内容编辑</router-link>
      <router-link to="/userManage">用户管理</router-link>
      <router-link to="/operationManagemet">运维管理</router-link>
    </div>
    <div class="header-userInfo">
      <div @click="area">
        <i class="iconfont icon-shoukedidian"></i><span>所属区域</span>
      </div>
      <div><i class="iconfont icon-yonghuming"></i><span>admin</span></div>
      <div @click="loginOut">
        <i class="iconfont icon-zhuxiao"></i><span>注销</span>
      </div>
    </div>
    <!-- 所属区域弹框 -->
    <el-dialog
      title="所属区域"
      :visible.sync="dialogFormVisible"
      width="55%"
      top="9vh"
      :closeOnClickModal="false"
      @close="closeDialog"
      custom-class="headerInput"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="IP地址: " prop="ip" :label-width="formLabelWidth">
          <el-input
            v-model="form.ip"
            autocomplete="off"
            placeholder="请输入IP地址"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="端口: " prop="port" :label-width="formLabelWidth">
          <el-input
            v-model="form.port"
            autocomplete="off"
            placeholder="请输入端口"
            maxlength="5"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <el-form-item
              label="所属区域: "
              :label-width="formLabelWidth"
              prop="regionId"
            >
              <el-select
                v-model="form.regionId"
                placeholder="请选择省市"
                :popper-append-to-body="false"
              >
                <el-option label="省" value="shanghai"></el-option>
                <el-option label="市" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="form.city"
                placeholder="请选择市区"
                :popper-append-to-body="false"
              >
                <el-option label="县" value="shanghai"></el-option>
                <el-option label="区" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="form.county"
                placeholder="请选择县"
                :popper-append-to-body="false"
              >
                <el-option label="镇" value="shanghai"></el-option>
                <el-option label="乡" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="form.street"
                placeholder="请选择乡"
                :popper-append-to-body="false"
              >
                <el-option label="村" value="shanghai"></el-option>
                <el-option label="名" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="具体地址: "
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input
            v-model="form.address"
            autocomplete="off"
            placeholder="请输入具体地址"
            maxlength="70"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="经度: "
          :label-width="formLabelWidth"
          prop="longitude"
        >
          <el-input
            v-model="form.longitude"
            autocomplete="off"
            placeholder="请输入经度"
            maxlength="70"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="纬度: "
          :label-width="formLabelWidth"
          prop="latitude"
        >
          <el-input
            v-model="form.latitude"
            autocomplete="off"
            placeholder="请输入纬度"
            maxlength="70"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱: " :label-width="formLabelWidth" prop="email">
          <el-input
            v-model="form.email"
            autocomplete="off"
            placeholder="请输入邮箱"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="负责人姓名: "
          :label-width="formLabelWidth"
          prop="leader"
        >
          <el-input
            v-model="form.leader"
            autocomplete="off"
            placeholder="请输入负责人姓名"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="负责人电话: "
          :label-width="formLabelWidth"
          prop="mobilephone"
        >
          <el-input
            v-model="form.mobilephone"
            autocomplete="off"
            placeholder="请输入负责人电话"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
        <el-button type="info" @click="dialogFormVisible = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ipVerify, personEmail, personPhone } from "@/utils/validator";
import Cookie from "js-cookie";
export default {
  name: "Header",
  data() {
    return {
      dialogFormVisible: false,
      form: {
        guid: "", //位置id
        version: "", //版本号
        ip: "",
        port: "", //端口
        regionId: "", //行政区域
        address: "", //地址
        longitude: "", //经度
        latitude: "", //纬度
        email: "", //邮箱
        leader: "", //负责人姓名
        mobilephone: "", //负责人电话
        city: "",
        county: "",
        street: "",
      },
      formLabelWidth: "140px",
      rules: {
        ip: { required: true, validator: ipVerify, trigger: "blur" },
        port: [
          {
            required: true,
            message: "端口号不能为空",
            trigger: "blur",
          },
          {
            pattern:
              /^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/,
            message: "请输入正确的端口号",
            trigger: "change",
          },
        ],
        regionId: [
          // 所属区域
          {
            required: true,
            message: "请选择区域",
            trigger: "change",
          },
        ],
        address: { message: "请输入具体地址", trigger: "change" },
        longitude: {
          pattern: /^\d{0,3}$/,
          message: "请输入正确的经度",
          trigger: "change",
        }, //经度
        latitude: {
          pattern: /^\d{0,3}$/,
          message: "请输入正确的纬度",
          trigger: "change",
        }, //纬度
        email: { required: true, validator: personEmail, trigger: "blur" }, //邮箱
        leader: { required: false, message: "请填写负责人姓名" },
        mobilephone: {
          required: true,
          validator: personPhone,
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    // 清除验证
    closeDialog: function () {
      this.$refs.ruleForm.resetFields();
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$layer.msg("更新成功");
          this.dialogFormVisible = false;
        } else {
          this.$layer.msg("更新失败");
          return false;
        }
      });
    },
    area() {
      this.dialogFormVisible = true;
    },
    loginOut() {
      Cookie.remove("userInfo");
      this.$router.push("/login");
    },
  },
};
</script>

<style  lang="less" scoped>
.top-header {
  min-width: 1440px;
  height: 90px;
  background: url("~@/assets/images/bg_nav.png") no-repeat;
  background-size: 100% 100%;
  background-color: #030d26;
  position: relative;
  color: #e6f8fe;
  .header-logo {
    float: left;
    width: 315px;
    img {
      float: left;
      width: 34px;
      height: 40px;
      margin: 22px 12px 0 30px;
    }
    p {
      float: left;
      font-size: 22px;
      font-weight: 500;
      margin-top: 23px;
      i {
        font-size: 16px;
      }
    }
  }
  .header-nav {
    float: left;
    height: 90px;
    width: 758px;
    padding-left: 9px;
    font-size: 17.5px;
    a {
      display: inline-block;
      width: 90px;
      height: 36px;
      line-height: 36px;
      margin-top: 33px;
      text-align: center;
      margin-right: 15px;
      border: 1px solid transparent;
      &:hover {
        border: 1px solid #78a4c0;
      }
    }
    .router-link-active {
      color: #030d26;
      background-color: #b4e1fe !important;
    }
  }

  .header-userInfo {
    float: right;
    color: #cfe2fd;
    font-size: 18px;
    width: 300px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    margin-top: 8px;
    margin-right: 20px;
    padding: 0 4px;
    div {
      cursor: pointer;
      i {
        font-size: 20px;
        &:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
<style  lang="less">
.headerInput {
  .el-input__inner {
    width: 90%;
  }
  .el-row {
    margin-bottom: 25px;
  }
  .el-col-5 {
    width: 18.83333%;
  }
}
</style>
